<template>
    <div class="article">
        <router-link tag="div" class="content" v-for="item in article" :key="item.id" :to="`/details/${item.id}`">
            <!-- 替换懒加载与替换不能使用的图片 -->
            <van-image class="img" lazy-load :src="item.image" alt="">
                <template v-slot:error>
                    <img src="../assets/image/noGood.png" alt="" />
                </template>
            </van-image>
            <ul>
                <li>{{ item.store_name }}</li>
                <li>
                    <span>￥{{ item.price }}</span>
                    <div>
                        <h2 :class="{ active: item.vip_price.length > 4 }">￥{{ item.vip_price }}</h2>
                        <h3>已售{{ item.sales }}{{ item.unit_name }}</h3>
                        <van-icon name="cart-circle-o" class="cart" />
                    </div>
                </li>
            </ul>
        </router-link>
        <!-- </div> -->
    </div>
</template>

<script>
export default {
    props: {
        article: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            show: true,
        };
    },
};
</script>

<style lang="scss" scoped>
.article {
    .content {
        display: flex;
        padding: 10px 0 15px 10px;
        border-bottom: 1px solid rgba(213, 202, 202, 0.3);
        .img {
            width: 90px;
            height: 90px;
        }
        ul {
            display: flex;
            height: 90px;
            margin-left: 10px;
            flex-direction: column;
            justify-content: space-between;
            li:nth-child(1) {
                width: 244.5px;
                font-size: 14px;
                word-break: keep-all; /* 不换行 */
                white-space: nowrap; /* 不换行 */
                overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
                text-overflow: ellipsis; /* 溢出时显示省略标记...；需与overflow:hidden;一起使用*/
            }
            li {
                font-size: 16px;
                position: relative;
                span {
                    font-weight: 700;
                    position: absolute;
                    top: -8vw;
                    color: red;
                }
                div {
                    display: flex;
                    width: 100%;
                    font-size: 12px;
                    h2 {
                        font-weight: 700;
                        position: relative;
                        &.active::after {
                            content: "";
                            background: url("@/assets/image/vip.png") no-repeat center center / cover;
                            width: 23px;
                            height: 10.5px;
                            position: absolute;
                            right: -55%;
                        }
                    }
                    h3 {
                        color: #ccc;
                        margin-left: 40px;
                    }
                    .cart {
                        width: 25px;
                        height: 25px;
                        font-size: 25px;
                        color: rgba(255, 92, 63, 0.7);
                        position: absolute;
                        top: 50%;
                        right: 0%;
                        transform: translateY(-100%);
                    }
                }
            }
        }
    }
}
</style>
